<template>
  <div class="coupon-table">
    <div class="table-header">
      <h3 class="table-title">优惠券模板列表</h3>
      <div class="table-actions">
        <BaseButton 
          type="secondary" 
          size="sm" 
          @click="$emit('refresh')"
        >
          🔄 刷新
        </BaseButton>
      </div>
    </div>

    <div v-if="loading" class="loading-state">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-else-if="data.length === 0" class="empty-state">
      <div class="empty-icon">📋</div>
      <h3>暂无优惠券模板</h3>
      <p>点击上方按钮创建第一个优惠券模板</p>
    </div>

    <div v-else class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>模板编号</th>
            <th>模板名称</th>
            <th>类型</th>
            <th>优惠内容</th>
            <th>使用门槛</th>
            <th>库存</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.id" class="table-row">
            <td>
              <span class="template-code">{{ item.templateCode }}</span>
            </td>
            <td>
              <div class="template-name">
                <span class="name">{{ item.name }}</span>
                <span v-if="item.description" class="desc">{{ item.description }}</span>
              </div>
            </td>
            <td>
              <span class="badge" :class="getTypeClass(item.couponType)">
                {{ getTypeText(item.couponType) }}
              </span>
            </td>
            <td>
              <span class="discount-value">
                {{ formatCouponValue(item) }}
              </span>
            </td>
            <td>
              <span class="threshold">
                {{ item.useThresholdAmount ? formatMoney(item.useThresholdAmount) : '无门槛' }}
              </span>
            </td>
            <td>
              <span class="inventory" :class="getInventoryClass(item.inventory)">
                {{ item.inventory || 0 }}
              </span>
            </td>
            <td>
              <span class="status-badge" :class="item.isActive ? 'active' : 'inactive'">
                {{ item.isActive ? '启用' : '禁用' }}
              </span>
            </td>
            <td>
              <span class="date">{{ formatDate(item.createdAt) }}</span>
            </td>
            <td>
              <div class="action-buttons">
                <BaseButton
                  type="secondary"
                  size="sm"
                  @click="$emit('view', item)"
                  title="查看详情"
                >
                  👁️
                </BaseButton>
                <BaseButton
                  type="secondary"
                  size="sm"
                  @click="$emit('edit', item)"
                  title="编辑"
                >
                  ✏️
                </BaseButton>
                <BaseButton
                  type="secondary"
                  size="sm"
                  @click="$emit('inventory', item)"
                  title="增加库存"
                >
                  📦
                </BaseButton>
                <BaseButton
                  type="danger"
                  size="sm"
                  @click="$emit('delete', item)"
                  title="删除"
                >
                  🗑️
                </BaseButton>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { couponUtils } from '@/utils'
import { BaseButton } from '@/components/common'
import type { CouponTemplate } from '@/services/coupon'

interface Props {
  data: CouponTemplate[]
  loading?: boolean
}

interface Emits {
  (e: 'refresh'): void
  (e: 'view', item: CouponTemplate): void
  (e: 'edit', item: CouponTemplate): void
  (e: 'inventory', item: CouponTemplate): void
  (e: 'delete', item: CouponTemplate): void
}

defineProps<Props>()
defineEmits<Emits>()

const getTypeClass = (type: number) => ({
  'reduction': type === 1,
  'discount': type === 2
})

const getTypeText = (type: number) => couponUtils.getTypeText(type)

const formatCouponValue = (item: CouponTemplate) => couponUtils.calculateValue(item)

const formatMoney = (amount: number) => couponUtils.formatAmount(amount)

const formatDate = (dateStr?: string) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

const getInventoryClass = (inventory?: number) => {
  if (!inventory || inventory <= 0) return 'empty'
  if (inventory <= 10) return 'low'
  return 'normal'
}
</script>

<style scoped>
.coupon-table {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.table-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.table-actions {
  display: flex;
  gap: 12px;
}

.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.data-table th {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.table-row:hover {
  background: var(--bg-secondary);
}

.template-name .name {
  font-weight: 500;
  color: var(--text);
  display: block;
}

.template-name .desc {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.badge.reduction {
  background: var(--success-bg);
  color: var(--success);
}

.badge.discount {
  background: var(--info-bg);
  color: var(--info);
}

.discount-value {
  font-weight: 600;
  color: var(--primary);
}

.inventory.empty {
  color: var(--danger);
  font-weight: 500;
}

.inventory.low {
  color: var(--warning);
  font-weight: 500;
}

.inventory.normal {
  color: var(--success);
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge.inactive {
  background: var(--danger-bg);
  color: var(--danger);
}

.date {
  color: var(--text-muted);
  font-size: 12px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.template-code {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 4px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 12px 16px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .base-button {
    width: 100%;
    justify-content: center;
  }
}
</style>